<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>

        <el-header>
            <a>
                安全知识竞赛搜题
            </a>
        </el-header>

        <el-main>

            <el-input v-model="input" placeholder="请输入一段题目"></el-input>

            <el-button type="primary" v-on:click="reloadpage" style="padding: 10px">搜题</el-button>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>单选</span>
                </div>
                <table>
                    <tr class="tr">
                        <td class="tdhead">题目</td>
                        <td class="tdhead">A</td>
                        <td class="tdhead">B</td>
                        <td class="tdhead">C</td>
                        <td class="tdhead">D</td>
                        <td class="tdhead">E</td>
                        <td class="tdhead">F</td>
                        <td class="tdhead">G</td>
                        <td class="tdhead">答案</td>
                    </tr>
                    <tr th:each="item:${danxuans}" class="tr">
                        <td class="td" th:text="${item.getQuestion()}"></td>
                        <td class="td" th:text="${item.getA()}"></td>
                        <td class="td" th:text="${item.getB()}"></td>
                        <td class="td" th:text="${item.getC()}"></td>
                        <td class="td" th:text="${item.getD()}"></td>
                        <td class="td" th:text="${item.getE()}"></td>
                        <td class="td" th:text="${item.getF()}"></td>
                        <td class="td" th:text="${item.getG()}"></td>
                        <td class="td" th:text="${item.getAnswer()}"></td>
                    </tr>
                </table>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>多选</span>
                </div>
                <table>
                    <tr class="tr">
                        <td class="tdhead">题目</td>
                        <td class="tdhead">A</td>
                        <td class="tdhead">B</td>
                        <td class="tdhead">C</td>
                        <td class="tdhead">D</td>
                        <td class="tdhead">E</td>
                        <td class="tdhead">F</td>
                        <td class="tdhead">G</td>
                        <td class="tdhead">答案</td>
                    </tr>
                    <tr th:each="item:${duoxuans}" class="tr">
                        <td class="td" th:text="${item.getQuestion()}"></td>
                        <td class="td" th:text="${item.getA()}"></td>
                        <td class="td" th:text="${item.getB()}"></td>
                        <td class="td" th:text="${item.getC()}"></td>
                        <td class="td" th:text="${item.getD()}"></td>
                        <td class="td" th:text="${item.getE()}"></td>
                        <td class="td" th:text="${item.getF()}"></td>
                        <td class="td" th:text="${item.getG()}"></td>
                        <td class="td" th:text="${item.getAnswer()}"></td>
                    </tr>
                </table>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>判断</span>
                </div>
                <table>
                    <tr class="tr">
                        <td class="tdhead">题目</td>
                        <td class="tdhead">答案</td>
                    </tr>
                    <tr th:each="item:${panduans}" class="tr">
                        <td class="td" th:text="${item.getQuestion()}"></td>
                        <td class="td" th:text="${item.getAnswer()}"></td>
                    </tr>
                </table>
            </el-card>

        </el-main>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                input: ''
            }
        },
        methods: {
            reloadpage: function (param) {
                window.location.href="http://**.**.**.**:8080/question/main?word="+this.input;
            }
        }
    })
</script>
</html>

<style>
    .el-header, .el-footer {
        background-color: #419fff;
        color: #ffffff;
        text-align: center;
        line-height: 60px;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 100%;
    }

    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 50%;
        padding: 20px;
    }

    .box-card {
        width: auto;
        margin: 30px;
    }

    .td{
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        font-size: 14px;
        color: #606266;
        border-collapse: separate;
        padding: 12px 0;
        min-width: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        transition: background-color .25s ease;
        width: auto;
    }

    .tr{
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        font-size: 14px;
        color: #606266;
        border-collapse: separate;
        background-color: #fff;
    }

    .tdhead{
        width: auto;
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        font-size: 14px;
        color: #606266;
        border-collapse: separate;
        padding: 12px 0;
        min-width: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        transition: background-color .25s ease;
    }
</style>